<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">发布方案</text>
		</uni-nav-bar>
		<view class="body flex-c">
			<view class="list">
				<view class="list-item flex-r">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>比赛类型</text>
					</view>
					<view class="item-right flex-r" @tap="toggle(true, 'sport')">
						<text class="status" v-if="!article.sportCode">请选择</text>
						<text class="active" v-else-if="sportCodeIndex !== null">{{sportCodeList[sportCodeIndex].title}}</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view>
				<view class="list-item flex-r">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>竞彩类型</text>
					</view>
					<view class="item-right flex-r" @tap="toggle(true, 'category')">
						<text class="status" v-if="!article.categoryCode">请选择</text>
						<text class="active" v-else-if="categoryCodeIndex !== null">{{categoryCodeList[categoryCodeIndex].title}}</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view>
				<view class="list-item flex-r">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>玩法类型</text>
					</view>
					<view class="item-right flex-r" @tap="toggle(true, 'play')">
						<text class="status" v-if="!article.playType">请选择</text>
						<text class="active" v-else-if="playTypeIndex !== null">{{playTypeList[sportCodeIndex][playTypeIndex].title}}</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item flex-c">
					<view class="item-select flex-r">
						<view class="item-title flex-r">
							<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
							<text>{{matchTwoShow ? '比赛一' : '比赛'}}</text>
						</view>
						<view class="item-right flex-r" @tap="selectMatch(0)">
							<text class="active" v-if="article.articleMatchInfos[0]">重新选择</text>
							<text class="status" v-else>请选择</text>
							<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
						</view>
					</view>
					<view class="item-match flex-r" v-if="matchInfo[0]">
						<text class="left color-grey">{{matchInfo[0].shortNameZh}}</text>
						<view class="center flex-c">
							<uni-dateformat class="color-grey" :date="matchInfo[0].matchTime" format="MM.dd hh:mm"></uni-dateformat>
							<view class="match-info flex-r">
								<text class="home text-bold">{{matchInfo[0].lotteryType !== 201 ? matchInfo[0].homeNameZh : matchInfo[0].awayNameZh}}</text>
								<text class="color-red text-bold">VS</text>
								<text class="away text-bold">{{matchInfo[0].lotteryType !== 201 ? matchInfo[0].awayNameZh : matchInfo[0].homeNameZh}}</text>
							</view>
						</view>
						<view class="right"></view>
					</view>
				</view>
				<view class="list-item flex-c">
					<view class="item-select flex-r">
						<view class="item-title flex-r">
							<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
							<text>玩法推荐</text>
						</view>
						<view class="item-right flex-r">
							<text class="status">请选择完玩法类型和比赛后选择</text>
						</view>
					</view>
					<view class="item-playbox" v-if="matchInfo[0] && matchZsInfo[0]">
						<view class="flex-c" v-if="article.playType == 1">
							<PlayType class="mt2" v-if="matchZsInfo[0]['spf']" type="spf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['spf']" :isReset="activeReset[0]" @forecast="forecast($event, 0)"></PlayType>
							<PlayType v-if="matchZsInfo[0]['rqspf']" type="rqspf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['rqspf']" :isReset="activeReset[0]" @forecast="forecast($event, 0)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['rqsf']" type="rqsf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['rqsf']" @forecast="forecast($event, 0)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['rfsf']" type="rfsf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['rfsf']" @forecast="forecast($event, 0)"></PlayType>
						</view>
						<view class="flex-c" v-if="article.playType == 2">
							<PlayType class="mt2" v-if="matchZsInfo[0]['jq']" type="jq" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['jq']" @forecast="forecast($event, 0)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['dxq']" type="dxq" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['dxq']" @forecast="forecast($event, 0)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['dxf']" type="dxf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['dxf']" @forecast="forecast($event, 0)"></PlayType>
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="matchTwoShow">
				<view class="list-item flex-c">
					<view class="item-select flex-r">
						<view class="item-title flex-r">
							<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
							<text>比赛二</text>
						</view>
						<view class="item-right flex-r" @tap="selectMatch(1)">
							<text class="active" v-if="article.articleMatchInfos[1]">重新选择</text>
							<text class="status" v-else>请选择</text>
							<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
						</view>
					</view>
					<view class="item-match flex-r" v-if="matchInfo[1]">
						<text class="left color-grey">{{matchInfo[1].shortNameZh}}</text>
						<view class="center flex-c">
							<uni-dateformat class="color-grey" :date="matchInfo[1].matchTime" format="MM.dd hh:mm"></uni-dateformat>
							<view class="match-info flex-r">
								<text class="home text-bold">{{matchInfo[1].lotteryType !== 201 ? matchInfo[1].homeNameZh : matchInfo[1].awayNameZh}}</text>
								<text class="color-red text-bold">VS</text>
								<text class="away text-bold">{{matchInfo[1].lotteryType !== 201 ? matchInfo[1].awayNameZh : matchInfo[1].homeNameZh}}</text>
							</view>
						</view>
						<view class="right"></view>
					</view>
				</view>
				<view class="list-item flex-c">
					<view class="item-select flex-r">
						<view class="item-title flex-r">
							<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
							<text>玩法推荐</text>
						</view>
						<view class="item-right flex-r">
							<text class="status">请选择完玩法类型和比赛后选择</text>
						</view>
					</view>
					<view class="item-playbox" v-if="matchInfo[1] && matchZsInfo[1]">
						<view class="flex-c" v-if="article.playType == 1">
							<PlayType class="mt2" v-if="matchZsInfo[1]['spf']" type="spf" :isSame="matchInfo[1].isSame" :scores="matchZsInfo[1]['spf']" :isReset="activeReset[1]" @forecast="forecast($event, 1)"></PlayType>
							<PlayType v-if="matchZsInfo[1]['rqspf']" type="rqspf" :isSame="matchInfo[1].isSame" :scores="matchZsInfo[1]['rqspf']" :isReset="activeReset[1]" @forecast="forecast($event, 1)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[1]['rqsf']" type="rqsf" :isSame="matchInfo[1].isSame" :scores="matchZsInfo[1]['rqsf']" @forecast="forecast($event, 1)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[1]['rfsf']" type="rfsf" :isSame="matchInfo[1].isSame" :scores="matchZsInfo[1]['rfsf']" @forecast="forecast($event, 1)"></PlayType>
						</view>
						<view class="flex-c" v-if="article.playType == 2">
							<PlayType class="mt2" v-if="matchZsInfo[1]['jq']" type="jq" :isSame="matchInfo[1].isSame" :scores="matchZsInfo[1]['jq']" @forecast="forecast($event, 1)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[1]['dxq']" type="dxq" :isSame="matchInfo[1].isSame" :scores="matchZsInfo[1]['dxq']" @forecast="forecast($event, 1)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[1]['dxf']" type="dxf" :isSame="matchInfo[1].isSame" :scores="matchZsInfo[1]['dxf']" @forecast="forecast($event, 1)"></PlayType>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item flex-c content">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>料标题</text>
					</view>
					<view class="item-content flex-r">
						<textarea class="textarea h200" v-model="article.title" :maxlength="80" placeholder="料标题不得出现违反国家价值观，诱导性、煽动性、承诺性等类型的词汇。" />
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item flex-c content">
					<view class="item-title flex-r">
						<!-- <image src="@/public/images/apply/bt.png" mode="aspectFit"></image> -->
						<text>前言内容</text>
					</view>
					<view class="item-content flex-r">
						<textarea class="textarea h480" v-model="article.preface" :maxlength="-1" />
						<view class="placeholder">
							<text v-show="!article.preface">
								1.前言内容不可包含行业敏感词（例如盘口、盘路、中水、高水、降水等）；更多敏感词详见发文提示。
								2.方案审核时间：9:00～0:00。请在这段时间发文。
								3.发布方案的时间请提前比赛开始3小时。否则可能导致方案审核过期。
								4.前言内容不可与正文内容重复。
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item flex-c content">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>正文内容</text>
					</view>
					<view class="item-content flex-r">
						<textarea class="textarea h560" v-model="article.content" :maxlength="-1" />
					    <view class="placeholder">
					        <text v-show="!article.content">
					            1.必须原创，不得抄袭。抄袭将被封号处理。
					            2.不可出现行业敏感词（例如盘口、盘路、中水、高水、降水等）；更多敏感词详见发文提示。
					            3.不得出现具有煽动性、诱导性、承诺性等类型的词汇。比如：必红、爆红、5星重心等。
					        </text>
					    </view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot bottom-ios">
			<view class="submit-box" @tap="submitPublish()">
				<button :class="{'active': canSubmit}">保存</button>
			</view>
		</view>
		<PickerPopup v-if="visible" :type="pickerType" :data="dataList" :select="selectIndex" :title="pickerTitle" @change="pickChange" @close="visible=false"></PickerPopup>
	</view>
</template>

<script>
	//import PickerPopup from "./components/ch-popup/ch-pickerpopup.vue"
	//import PlayType from "./components/ch-wanfa/ch-playtype.vue"
	export default {
		data() {
			return {
				articleId: 0,
				articleIndex: 0,
				articleDetail: {},
				
				visible: false,
				dataList: [],
				selectIndex: 0,
				pickerTitle: '',
				pickerType: null,

				sportCodeList: [],
				sportCodeIndex: null,
				categoryCodeList: [],
				categoryCodeIndex: null,
				playTypeList: [
					[{ title: '让球', value: 1 },{ title: '大小球', value: 2 }],
					[{ title: '让分', value: 1 },{ title: '大小分', value: 2 }],
				],
				playTypeIndex: null,
				activeReset: [],
				
				matchList: [],
				matchInfo: [],
				matchZsInfo: [],
				matchTwoShow: false,
				
				article: {
					sportId: null,
					sportCode: null,
					categoryCode: null,
					playType: null,
					lotteryType: null,
					title: null,
					preface: null,
					content: null,
					articleMatchInfos: [],
				},
				
				toast: {
					title: '标题不少于15字',
					sportId: '请选择比赛类型',
					sportCode: '请选择比赛类型',
					categoryCode: '请选择竞彩类型',
					playType: '请选择玩法类型',
					lotteryType: '请选择比赛',
					content: '正文在150字以上',
					articleMatchInfos: '请推荐玩法'
				},
				
				canLeave: false,
				navBorder: false
			};
		},
		components: {
			PickerPopup: () => import("@/components/ch-popup/ch-pickerpopup.vue"),
			PlayType: () => import("@/components/ch-wanfa/ch-playtype.vue")
		},
		computed: {
			canSubmit() {
				let res = Object.keys(this.article).every((item) => {
					return item == 'preface' || (this.article[item] != null && this.article[item] != '')
				})
				if(res){
					if(this.article.title.length < 15){
						return false
					}
					if(this.article.content.length < 150){
						return false
					}
					if(this.article.articleMatchInfos[0] && this.article.articleMatchInfos[0].expertForecasts[0]){
						if(this.matchTwoShow){
							if(this.article.articleMatchInfos[1] && this.article.articleMatchInfos[1].expertForecasts[0]){
								return true
							}else{
								return false
							}
						}else{
							return true
						}
					}else{
						return false
					}
				}else{
					return false
				}
			}
		},
		watch: {
			sportCodeIndex(newValue) {
				this.article.categoryCode = null
				this.categoryCodeIndex = null
				if(newValue !== null){
					this.article.sportCode = this.sportCodeList[newValue].code
					this.article.sportId = Number(this.sportCodeList[newValue].codeValue)
					this.categoryCodeList = this.sportCodeList[newValue].children
				}else{
					this.article.sportCode = null
					this.article.sportId = null
				}
			},
			categoryCodeIndex(newValue) {
				this.article.playType = null
				this.playTypeIndex = null
				if(newValue !== null){
					this.article.categoryCode = this.categoryCodeList[newValue].code
					if(this.article.categoryCode == "A01A02A03" || this.article.categoryCode == "A01A01A02"){
						this.matchTwoShow = true
					}else{
						this.matchTwoShow = false
					}
				}
			},
			playTypeIndex(newValue) {
				if(newValue === null){
					this.matchList = []
				}else{
					this.article.playType = this.playTypeList[this.sportCodeIndex][newValue].value
					if(this.article.categoryCode){
						this.getMatchList()
					}
				}
				this.article.lotteryType = null
				this.article.articleMatchInfos= []
				this.matchZsInfo = []
				this.matchInfo = []
			}
		},
		onLoad() {
			console.log(this.$Route.query);
			this.articleIndex = this.$Route.query.index
			this.articleId = this.$Route.query.edit
			if(this.articleId){
				this.getSportCodeList(true)
			}else{
				this.getSportCodeList(false)
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		beforeRouteLeave(to, from, next) {
			console.log(to);
			if(to.name == 'applyarticle'){
				if(this.canLeave){
					next()
				}else{
					uni.showModal({
						title:'返回提示',
						content: '确认要放弃保存当前方案吗？',
						confirmText: '确认',
						success: (res) => {
							if(res.confirm){
								this.canLeave = true
								uni.$emit('publish', null)
								this.$goBack(1)
							}
						}
					})
					next(false)
				}
			}else{
				next()
			}
		},
		methods: {
			//获取比赛code
			getSportCodeList(edit) {
				this.$http.get({
					url: '/api/sysCategory/loadTreeRoot',
					data: {
						pcode: 'A01',
						async: false
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						if(Math.abs(data.timestamp - Date.now()) > 30000){
							this.$ShowToast({text: '时间异常，请调整系统时间', type: 2})
							this.$goBack(1)
						}else{
							this.sportCodeList = data.result
							if(edit){
								this.getArticleDetail()
							}
						}
					}else{
						this.$ShowToast({text: '比赛数据异常，请返回重试', type: 2})
						this.$goBack(1)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//料详情
			getArticleDetail() {
				this.$http.get({
					url: '/api/applyUgcArticle/get',
					data: {
						ugcArticlerId: this.articleId
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.articleDetail = data.result
						this.initArticleDetail(data.result)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//方案编辑初始化
			initArticleDetail(articleDetail) {
				//数据初始化
				Object.keys(this.article).forEach((item) => {
					if(typeof articleDetail[item] != 'undefined'){
						this.article[item] = articleDetail[item]
					}
				})
				//更新picker索引
				this.sportCodeIndex = this.sportCodeList.findIndex((item) => {
					return item.code == articleDetail.sportCode
				})
				this.$nextTick(()=>{
					this.categoryCodeIndex = this.categoryCodeList.findIndex((item) => {
						return item.code == articleDetail.categoryCode
					})
					this.$nextTick(()=>{
						this.playTypeIndex = articleDetail.playType - 1
						setTimeout(()=>{
							this.article.articleId = this.articleId
							this.article.lotteryType = articleDetail.lotteryType
							//获取本地比赛数据
							let articleData = uni.getStorageSync('apply_article_'+this.articleIndex) || null
							if(articleData != null && articleData.articleId == this.articleId){
								articleDetail.ugcArticleMatchInfos.forEach((match, index) => {
									let matchInfo = articleData.matchInfo.find(item => item.id == match.matchId)
									if(matchInfo){
										this.$set(this.matchInfo, index, matchInfo)
									}
								})
							}
							//更新实时数据
							if(this.matchList[0]){
								articleDetail.ugcArticleMatchInfos.forEach((match, index) => {
									let matchInfo = this.matchList.find(item => item.id == match.matchId)
									if(matchInfo){
										this.$set(this.matchInfo, index, matchInfo)
									}
								})
							}
							//预测数据转化
							articleDetail.ugcArticleMatchInfos.forEach((item, index)=>{
								let articleMatchInfo = {
									expertForecasts: item.articleForecastInfoDTOList,
									isSame: item.isSame,
									matchId: item.matchId
								}
								this.$set(this.article.articleMatchInfos, index, articleMatchInfo)
								//指数格式转化
								let scores = this.$CHS.forecastToScores(item.articleForecastInfoDTOList)
								this.$set(this.matchZsInfo, index, scores)
							})
							this.$forceUpdate()
							console.log(this.article);
						}, 300)
					})
				})
			},
			//保存提交
			submitPublish() {
				if(this.canSubmit){
					this.testArticleValue(this.article).then((formData) => {
						console.log(formData);
						this.$http.post({
							url: this.articleId ? '/api/applyUgcArticle/edit' : '/api/applyUgcArticle/add',
							data: formData
						}).then((data) => {
							console.log(data);
							if(data.success && data.result){
								//成功提示
								this.$ShowToast({text: '方案保存成功'})
								if(this.articleId){
									uni.$emit('publish', {articleId: this.articleId, title: formData.title})
								}else{
									uni.$emit('publish', {articleId: data.result, title: formData.title})
								}
								let articleData = {
									article: formData,
									articleId: this.articleId ? this.articleId : data.result,
									sportCodeIndex: this.sportCodeIndex,
									categoryCodeIndex: this.categoryCodeIndex,
									playTypeIndex: this.playTypeIndex,
									matchInfo: this.matchInfo
								}
								uni.setStorageSync('apply_article_'+this.articleIndex, articleData)
								this.canLeave = true
								this.$goBack(1)
							}else{
								uni.showToast({
									title: data.message || '方案保存失败',
									icon: 'none'
								})
							}
						}).catch((err) => {
							console.log(err);
							uni.showToast({
								title: '方案保存失败，请稍后重试',
								icon: 'none'
							})
						})
					}).catch((res) => {
						console.log(res);
					})
				}else{
					console.log(this.article);
					for(let key in this.article){
						if(!this.article[key] && this.toast[key]){
							uni.showToast({
								title: this.toast[key],
								icon: 'none'
							})
							break
						}
						if(key == 'title'){
							if(this.article[key].length < 15 && this.toast[key]){
								uni.showToast({
									title: this.toast[key],
									icon: 'none'
								})
								break
							}
						}
						if(key == 'content'){
							if(this.article[key].length < 150 && this.toast[key]){
								uni.showToast({
									title: this.toast[key],
									icon: 'none'
								})
								break
							}
						}
						if(key == 'articleMatchInfos'){
							if((!this.article[key][0] || !this.article[key][0].expertForecasts[0]) && this.toast[key]){
								uni.showToast({
									title: this.toast[key],
									icon: 'none'
								})
								break
							}
							if(this.matchTwoShow && (!this.article[key][1] || !this.article[key][1].expertForecasts[0]) && this.toast[key]){
								uni.showToast({
									title: this.toast[key],
									icon: 'none'
								})
								break
							}
						}
					}
				}
			},
			//底部picker开关
			toggle(status, type){
				if(status){
					this.pickerType = type
					if(type == 'sport'){
						if(this.sportCodeList[0]){
							this.dataList = this.sportCodeList
							this.selectIndex = this.sportCodeIndex || 0
							this.pickerTitle = '比赛类型'
							this.visible = true
						}else{
							uni.showToast({
								title: '比赛数据异常，请返回重试',
								icon: 'none'
							})
						}
					}else if(type == 'category'){
						if(this.article.sportCode != null){
							this.dataList = this.categoryCodeList
							this.selectIndex = this.categoryCodeIndex || 0
							this.pickerTitle = '竞彩类型'
							this.visible = true
						}else{
							uni.showToast({
								title: '请先选择比赛类型',
								icon: 'none'
							})
						}
					}else if(type == 'play'){
						if(this.article.categoryCode != null){
							this.dataList = this.playTypeList[this.sportCodeIndex]
							this.selectIndex = this.playTypeIndex || 0
							this.pickerTitle = '玩法类型'
							this.visible = true
						}else{
							uni.showToast({
								title: '请先选择竞彩类型',
								icon: 'none'
							})
						}
					}
				}else{
					this.visible = false
				}
			},
			//picker选择回调
			pickChange({index, type}){
				console.log(index);
				console.log(type);
				if(type == 'sport'){
					this.sportCodeIndex = index
				}
				if(type == 'category'){
					this.categoryCodeIndex = index
				}
				if(type == 'play'){
					this.playTypeIndex = index
				}
			},
			//选择比赛
			selectMatch(index) {
				if(this.article.playType && this.article.categoryCode && this.matchList[0]){
					uni.$once('select', (match)=>{
						console.log(match);
						if(match != null){
							this.article.lotteryType = match.lotteryType
							if(!this.matchInfo[index] || this.matchInfo[index].id != match.id){
								this.getMatchZsInfo(match, index)
							}
						}
					})
					console.log(this.matchInfo);
					let selectMatch = null
					if(this.matchInfo[0] && index == 1){
						console.log(this.matchInfo[0].id);
						selectMatch = this.matchInfo[0].id
					}
					if(this.matchInfo[1] && index == 0){
						console.log(this.matchInfo[1].id);
						selectMatch = this.matchInfo[1].id
					}
					if(selectMatch){
						this.$goByName('selectmatch', {category: this.article.categoryCode, matchId: selectMatch});
					}else{
						this.$goByName('selectmatch', {category: this.article.categoryCode});
					}
				}else{
					uni.showToast({
						title: '请先选择玩法类型',
						icon: 'none'
					})
				}
			},
			//赛事列表
			getMatchList() {
				this.$http.get({
					url: '/api/expertQueryMatchRows',
					data: {
						code: this.article.categoryCode
					},
				}).then((data) => {
					console.log(data);
					if(data.success && data.result[0]){
						this.matchList = data.result
					}else{
						this.article.playType = null
						this.playTypeIndex = null
						uni.showToast({
							title: '当前玩法没有比赛，请重新选择',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询赛事指数
			getMatchZsInfo(match, index) {
				this.$http.get({
					url: '/api/expertQueryMatchZs',
					data: {
						matchId: match.id,
						categoryCode: this.article.categoryCode,
						playType: this.article.playType,
						sportCode: this.article.sportCode
					}
				}).then(data => {
					if(data.success && data.result){
						let scores = this.$CHS.zsToScores(data.result)
						if(Object.keys(scores).length > 0){
							if(this.article.lotteryType == '101'){
								let test = Object.keys(scores).every((item)=>{
									return item == 'rqsf' || item == 'dxq'
								})
								if(test){
									uni.showToast({
										title: '当前比赛指数不全，请重新选择',
										icon: 'none'
									})
									return
								}
							}
							this.$set(this.matchInfo, index, match)
							this.$set(this.matchZsInfo, index, scores)
							let matchInfo = {
								matchId: match.id,
								isSame: match.isSame === 0 ? match.isSame : 1,
								expertForecasts: []
							}
							this.$set(this.article.articleMatchInfos, index, matchInfo)
							this.$forceUpdate()
						}else{
							uni.showToast({
								title: '当前比赛没有指数，请重新选择',
								icon: 'none'
							})
						}
					}else{
						uni.showToast({
							title: '比赛指数查询错误，请重新选择',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//玩法预测回调
			forecast(data, index){
				if(this.article.articleMatchInfos[index]){
					let matchForecast = this.article.articleMatchInfos[index].expertForecasts
					if(matchForecast[0]){
						matchForecast = matchForecast.filter(item => item.forecastType != data.type)
						this.article.articleMatchInfos[index].expertForecasts = matchForecast
					}
				}
				if(data.data != null){
					//spf rqspf 互斥
					this.resetForecast(data.type, 'spf', 'rqspf', index)
					this.resetForecast(data.type, 'rqspf', 'spf', index)
					this.article.articleMatchInfos[index].expertForecasts.push(data.data)
				}
				console.log(this.article.articleMatchInfos);
			},
			//玩法选择互斥
			resetForecast(type, activeType, resetType, index) {
				if(type == activeType){
					let matchForecast = this.article.articleMatchInfos[index].expertForecasts
					matchForecast = matchForecast.filter(item => item.forecastType != resetType)
					this.article.articleMatchInfos[index].expertForecasts = matchForecast
					
					this.$set(this.activeReset, index, resetType)
					this.$nextTick(()=>{
						this.$set(this.activeReset, index, '')
					})
					this.$forceUpdate()
				}
			},
			//数据校验
			testArticleValue(formData) {
				return new Promise((resolve,reject)=>{
					if(!formData.articleMatchInfos[0]){
						uni.showToast({
							title: '请选择比赛',
							icon: 'none'
						})
						reject(formData)
					}else if(!formData.articleMatchInfos[0].expertForecasts[0]){
						uni.showToast({
							title: '请推荐至少一种玩法',
							icon: 'none'
						})
						reject(formData)
					}else if(formData.lotteryType == '101'){
						if(formData.articleMatchInfos[0]){
							let test = formData.articleMatchInfos[0].expertForecasts.every((item)=>{
								return item.forecastType == 'rqsf' || item.forecastType == 'dxq'
							})
							if(test){
								uni.showToast({
									title: '请推荐至少一种竞彩玩法',
									icon: 'none'
								})
								reject(formData)
							}
						}
						if(formData.articleMatchInfos[1]){
							let test = formData.articleMatchInfos[1].expertForecasts.every((item)=>{
								return item.forecastType == 'rqsf' || item.forecastType == 'dxq'
							})
							if(test){
								uni.showToast({
									title: '请推荐至少一种竞彩玩法',
									icon: 'none'
								})
								reject(formData)
							}
						}
						resolve(formData)
					}else{
						resolve(formData)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
	}
	.body{
		margin-top: 20rpx;
		margin-bottom: calc(120rpx + var(--safe-area-inset-bottom) + var(--vh-offset, 0px));
		.list{
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			.list-item{
				margin: 0 20rpx;
				padding: 30rpx 0;
				align-items: center;
				border-bottom: 1rpx solid #EDEDED;
				.item-title{
					flex: 2;
					align-items: center;
					line-height: 30rpx;
					font-size: 30rpx;
					image{
						margin-right: 20rpx;
						width: 13rpx;
						height: 12rpx;
					}
				}
				.item-right{
					align-items: center;
					.active, .status{
						margin-right: 18rpx;
					}
					.status{
						font-size: 28rpx;
						color: #b3b3b3;
						line-height: 28rpx;
					}
				}
				.item-select{
					width: 100%;
					justify-content: space-between;
				}
				.item-playbox{
					.mt2{
						margin-top: 30rpx;
					}
					/deep/ .wanfa:first-child{
						margin-top: 30rpx;
					}
				}
				.item-match{
					width: calc(100% - 60rpx);
					margin-top: 30rpx;
					padding: 30rpx;
					background-color: #F2F5FA;
					border-radius: 10rpx;
					.color-grey{
						font-size: 22rpx;
						line-height: 24rpx;
						font-family: Arial;
						color: #999999;
					}
					.left, .right{
						width: 120rpx;
					}
					.center{
						flex: 2;
						align-items: center;
						justify-content: center;
						.match-info{
							width: 100%;
							margin-top: 20rpx;
							.text-bold{
								font-size: 26rpx;
							}
							.home{
								text-align: right;
								margin-right: 30rpx;
								flex: 1;
							}
							.away{
								text-align: left;
								margin-left: 30rpx;
								flex: 1;
							}
							.color-red{
								font-family: Arial Black;
							}
						}
					}
				}
				.item-content{
					width: 100%;
					position: relative;
				}
				&.content{
					align-items: flex-start;
					.textarea{
						flex: 2;
						margin-top: 30rpx;
						background: #F2F5FA;
						border-radius: 10rpx;
						padding: 25rpx 20rpx;
						font-size: 26rpx;
						line-height: 40rpx;
						/deep/ .textarea-placeholder{
							font-size: 26rpx;
							color: #B3B3B3;
							line-height: 40rpx;
						}
						&.h200{
							height: 140rpx;
						}
						&.h480{
							height: 420rpx;
							background: transparent;
							z-index: 2;
						}
						&.h560{
							height: 500rpx;
							background: transparent;
							z-index: 2;
						}
					}
					.placeholder{
						z-index: 1;
						padding: 25rpx 20rpx;
						background: #F2F5FA;
						border-radius: 10rpx;
						position: absolute;
						top: 30rpx;
						bottom: 0;
						left: 0;
						right: 0;
						font-size: 26rpx;
						color: #B3B3B3;
						line-height: 40rpx;
					}
				}
			}
			.list-item:last-child{
				border: none;
			}
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0px -1px 0px 0px #EDEDED;
		z-index: 5;
		.submit-box{
			margin: 16rpx 20rpx;
			button{
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>
